<style scoped lang="less">
	.warp{
	}
	.view-warp-title{
		width: 100%;
		height: 1.23rem;
		line-height: 1.23rem;
		font-size: 0.43rem;
		text-indent: 3.5%;
		color: #666;
		border-bottom: 0.03rem solid #eee;
		background-color: white;
		span{
			float: right;
			width: 2.56rem;
			height: 0.75rem;
			line-height: 0.75rem;
			margin-right: 0.35rem;
			margin-top: 0.24rem;
			background-color: #158ECE;
			color:#fff;
			font-size: 0.37rem;
			// text-align: center;
			border-radius: 0.05rem;
			img{
				width: 0.37rem;
				height: 0.41rem;
				vertical-align: sub;
			}
		}
	}
	.view-warp-ul{
		width: 100%;
		overflow: hidden;
		background-color: white;
		li{
			width: 33%;
			height: 2.88rem;
			float: left;
			text-align: center;
			overflow: hidden;
			border-bottom: 0.03rem solid #eee;
			border-right: 0.03rem solid #eee;
			img{
				width: 1.01rem;
				height: 1.01rem;
				margin-top: 0.69rem;
			}
			span{
				display:block;
				margin-top: 0.32rem;
				font-size: 0.35rem;
				color: #999;
			}
		}
		li:nth-child(3n){
			border-right: 0;	
		}
	}
	.call-phone{
		color:#fff;
	}
	a:link{
		text-decoration: none;		
	}
	.phoneWarp{
		background: #F7F7F7;
		.top{
			background: #fff;
			padding: 0.75rem 0 0.69rem 0.85rem;
			margin-bottom: 0.27rem;
			div{
				margin-right: 0.99rem;
				float: left;
				text-align: center;
				font-size: 0.37rem;
				color: #121212;
				img{
					width: 1.33rem;	
					height: 1.33rem;
					display: block;
					margin-bottom: 0.29rem;
				}
			}
			div:nth-child(4){
				margin-right: 0;
			}
		}
		.cemeteryServer,.systemServer{
			margin-bottom: 0.27rem;
			.title{
				height:1.17rem;
				background: #fff;
				border-bottom: 0.02rem solid #EAEAEA;
				display: flex;
				align-items: center;
				span{
					display: inline-block;
					width: 0.13rem;
					height: 0.53rem;
					border-radius: 1.33rem;
					background-image: linear-gradient(-145deg, #FFAC12 0%, #FD5286 100%);
					margin: 0 0.27rem 0 0.32rem;						
				}
				p{
					color: #2C2C2C;
					font-size: 0.43rem;
					font-weight: bold;
				}
			}
			.ul{
				background: #fff;
				display: flex;
				flex-wrap: wrap;
				li{
					text-align: center;
					margin-bottom: 1.01rem;
					margin:0.67rem 0 0.43rem 0;
					font-size: 0;
					img{
						width: 0.85rem;	
						height: 0.85rem;
						margin-bottom: 0.13rem;
					}
					p{
						font-size: 0.35rem;
						color: #121212;
					}
					width: 33%;
				}
			}
		}
		.systemServer{
			margin-bottom: 0;
		}
		.tipsPop{
			position: fixed;
			width: 3.25rem;
			height: 1.09rem;
			line-height: 1.09rem;
			text-align: center;
			font-size: 0.4rem;
			color:#fff;
			background: rgba(51,51,51,0.80);
			box-shadow: 0 1px 6px 0 rgba(0,0,0,0.24);
			border-radius: 0.16rem;
			z-index:10;
			top:50%;
			left: 50%;
			margin: -0.51rem 0 0 -1.625rem;
		}
	}
</style>
<template>	
	<div class="phoneWarp">
		<!--客服反馈页面-->
		<!-- <p class="view-warp-title">陵园服务<span><img src="../../images/phoneicon.png"/><a :href="'tel:'+customerServiceTel" class="call-phone">联系陵园</a></span></p>
		<ul class="view-warp-ul">
			<li @click="goinfo(1,item.id)" v-for="item in feedbackTypeList"><img :src="imgurl+item.thumbnailPicturePath"/><span>{{item.name}}</span></li>
		</ul> -->
		<!--客服反馈页面-->
		<!-- <p class="view-warp-title" style="margin-top:0.37rem">客服反馈</p>
		<ul class="view-warp-ul">
			<li @click="goinfo(3,0)"><img src="../../images/sygz.png"/><span>使用故障</span></li>
			<li @click="goinfo(4,0)"><img src="../../images/gnjy.png"/><span>功能建议</span></li>
			<li @click="goinfo(5,0)"><img src="../../images/yhty.png"/><span>用户体验与界面</span></li>
			<li @click="goinfo(6,0)"><img src="../../images/qt.png" style="width: 53%;height: auto;margin-top: 1rem;"/><span>其他</span></li>
		</ul> -->
		<!-- 通知 -->
		<p class="notice"></p>
		<div class="top clearfix">
			<div v-for="item in topList"><img :src="item.src" alt="" @click="goinfo(16,0)">{{item.name}}</div>			
		</div>
		<!-- 陵园服务 -->
		<div class="cemeteryServer">
			<div class="title"><span></span><p>陵园服务</p></div>
			<ul class="ul"> 
				<li v-for="item in feedbackTypeList" @click="goinfo(item.status,item.id)"><img :src="imgurl+item.sourcePicturePath" alt=""><p>{{item.name}}</p></li>
			</ul>
		</div>
		<!-- 系统反馈 -->
		<div class="systemServer">
			<div class="title"><span></span><p>系统反馈</p></div>
			<ul class="ul"> 
				<li v-for="item in systemServerList" @click="goinfo(item.type,0)"><img :src="item.src" alt=""><p>{{item.name}}</p></li>
			</ul>
		</div>
		<!-- 暂未开放提示 -->
		<div class="tipsPop" v-show="tipsPopFlg">陵园尚未开放</div>
	</div>
</template>
<script>
    import { mapState } from 'vuex'
    import global from '../../config/global'
    import '../../js/flexible.debug.js'
    import '../../less/moblie.less'
    export default {
		data() {
			return {
				imgurl:global.imgurl,
				videourl:global.videourl,
				hosturl:global.host,
				topList:[
					{"src":require('../../images/phone-back-top1.png'),"name":"预约"},
					{"src":require('../../images/phone-back-top2.png'),"name":"祭扫"},
					{"src":require('../../images/phone-back-top3.png'),"name":"续费"},
					{"src":require('../../images/phone-back-top4.png'),"name":"导航"},
				],
				cemeteryServerList:[
					{"src":require('../../images/phone-back-cenetery-1.png'),"name":"墓穴报修","type":"7"},
					{"src":require('../../images/phone-back-cenetery-2.png'),"name":"陵园订餐","type":"8"},
					{"src":require('../../images/phone-back-cenetery-3.png'),"name":"购买鲜花","type":"9"},
					{"src":require('../../images/phone-back-cenetery-4.png'),"name":"电子发票","type":"10"},
					{"src":require('../../images/phone-back-cenetery-5.png'),"name":"园区班车","type":"11"},
					{"src":require('../../images/phone-back-cenetery-6.png'),"name":"急救药品","type":"12"},
					{"src":require('../../images/phone-back-cenetery-7.png'),"name":"陵园电车","type":"13"},
					{"src":require('../../images/phone-back-cenetery-8.png'),"name":"便民服务","type":"14"},
					{"src":require('../../images/phone-back-cenetery-9.png'),"name":"园区投诉","type":"15"},
				],
				systemServerList:[
					{"src":require('../../images/phone-back-system-1.png'),"name":"使用故障","type":"3"},
					{"src":require('../../images/phone-back-system-2.png'),"name":"功能建议","type":"4"},
					{"src":require('../../images/phone-back-system-3.png'),"name":"用户体验","type":"5"},
					{"src":require('../../images/phone-back-system-4.png'),"name":"其他建议","type":"6"},
				],
				feedbackTypeList:[],
				customerServiceTel:"",
				tipsPopFlg:false,
			}
		},
		components: {
		},
		computed: {
		},
		mounted(){
			document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
		},
		created() {
			this.ajax();
		},
		watch: {
		},
        computed: mapState({ user: state => state.user }),
		methods:{
			ajax(){
				this.$http.get(this.hosturl+"/unsecured/mobile/feedback/type/getDataList?cemeteryId="+this.$route.query.lyid)
				.then((response) => {
					this.feedbackTypeList = response.body.feedbackTypeList;
					this.customerServiceTel =  response.body.customerServiceTel;
				})
				.catch(function (response) {
				})
			},
			goinfo(type,id){				
				if(type == 16 || type == 2){
					if(this.tipsPopFlg){
						return;
					}
					this.tipsPopFlg = true;
					setTimeout(() => {
						this.tipsPopFlg = false;
					}, 1000);
					return;
				}
				this.$router.push({ path: '/feedbackinfo',query:{"lyid":this.$route.query.lyid,"feedbacktype":type,"feedbacktypeId":id,"phoneNum":this.customerServiceTel}});
			}
		}
    }
</script>